import React from 'react';
import '../../static/topic/topicDetails.styl'
import {Button, Spin} from 'antd';
import moment from 'moment';
import axios from 'axios'

export default class Summary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.index,
      introduceText: '',
      imgUrl: [],
      trendList: [],
      loaded: false
    }
  }

  // 事件综述的简介、图片、走势
  introduce = async () => {
    this.setState({
      loaded: false
    });
    let text = await
      axios.post('vrv-monitor-platform-web/topic/read/getProfileText', {
        id: this.state.id
      });
    let img = await
      axios.post('vrv-monitor-platform-web/topic/read/getProfileImgUrl', {
        id: this.state.id
      });
    let trend = await
      axios.post('vrv-monitor-platform-web/topic/read/getProfileTrend', {
        id: this.state.id
      });
    // console.log(trend.data.data);
    this.setState({
      introduceText: text.data.data,
      imgUrl: img.data.data.split(";"),
    });
    if (trend.data.statusCode === 200) {
      this.setState(prevState => ({
        trendList: trend.data.data,
        loaded: true,
      }));
    } else {
      this.setState(prevState => ({
        loaded: true,
      }));
    }
  };

  componentDidMount() {
    this.introduce()
  }

  render() {
    return (
      <div className="summary">
        <div className="introduction">
          <h4>事件简介</h4>
          {
            this.state.loaded?
              <p>{this.state.introduceText}</p>:
              <div style={{paddingLeft:50}}>
                <Spin/>
              </div>
          }
        </div>
        <div className="relatedImg">
          <h4>事件相关图片</h4>
          {
            this.state.imgUrl.length > 0 ?
              <div>
                {
                  this.state.imgUrl.map((item, i) => {
                    return <img src={item} alt="" key={i} onError={() => {
                      this.src = '/static/topic/map.png'
                    }
                    }/>
                  })
                }
              </div> : ''
          }
        </div>
        <div className="trend">
          <h4>
            事件走势
            <Button type="primary" size="small" ghost className="merge">合并事件进展</Button>
          </h4>
          {
            this.state.loaded ?
              this.state.trendList.length > 0 ?
                <ul>
                  {
                    this.state.trendList.map((item, i) => {
                      if(item.data!==null){
                        // console.log(item);
                        let showDate = new Date();
                        showDate.setTime(item.data[0].poTime);
                        let time = moment(showDate).format('M月D日 H点');
                        return <li key={i}>
                          <span>[{time}]</span>
                          <div className="line"></div>
                          <div className="startPoint"></div>
                          <div className="content">{item.data[0].title} [{item.data[0].webSite}]</div>
                        </li>
                      }
                    })
                  }
                </ul> : '无数据'
              :<div style={{display:'flex',justifyContent:'center',alignItems:'center',height:200}}>
                <Spin size="large"/>
              </div>
          }
        </div>
      </div>
    );
  }
}